<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post">
			<table border="1" cellspacing="0" cellpadding="10" id="table_id">
				<tr>
					<th></th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>家庭住址</th>
				</tr>
				<tr>
					<td><input type="checkbox" name="inputname1" id="inputid1" value="" /></td>
					<td>张三</td>
					<td class="sex">男</td>
					<td>20</td>
					<td>福建省龙岩市新罗区</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="" id="" value="" /></td>
					<td>张三</td>
					<td class="sex">男</td>
					<td>20</td>
					<td>福建省龙岩市新罗区</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="" id="" value="" /></td>
					<td>李梅</td>
					<td class="sex">女</td>
					<td>20</td>
					<td>福建省龙岩市新罗区</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="" id="" value="" /></td>
					<td>小丽</td>
					<td class="sex">女</td>
					<td>20</td>
					<td>福建省龙岩市新罗区</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="" id="" value="" /></td>
					<td>小丽</td>
					<td class="sex">女</td>
					<td>20</td>
					<td>福建省龙岩市新罗区</td>
				</tr>

			</table>
		</form>

		<input type="checkbox" id="ck_all" />全选
		<input type="checkbox" id="ck_man" />全选男
		<input type="checkbox" id="ck_women" />全选女
	</body>
	<script type="text/javascript">
		document.getElementById("ck_all").onclick = doSelAll;


		function doSelAll() {

			var table_id = document.getElementById('table_id');
			var inputAll = table_id.getElementsByTagName('input');
			console.log(inputAll)
			var checkAllValue = document.getElementById('ck_all').checked;
			for (var i = 0; i < inputAll.length; i++) {
				// 所有选项的状态 要与 全选框checked状态相同
				inputAll[i].checked = checkAllValue;
			}
		}
		document.getElementById("ck_man").onclick = doSelMan;

		function doSelMan() {
			var stu_man = document.getElementsByClassName('sex')
			for (var i = 0; i < stu_man.length; i++) {
				if (stu_man[i].innerText == '男') {
					var table_id = document.getElementById('table_id');
					var inputAll = table_id.getElementsByTagName('input');
					var checkAllValue = document.getElementById('ck_man').checked;
					inputAll[i].checked = checkAllValue
					document.getElementById('ck_women').checked = false;
				} else if (stu_man[i].innerText != '男') {
					var table_id = document.getElementById('table_id');
					var inputAll = table_id.getElementsByTagName('input');
					inputAll[i].checked = false;
				}
			}
		}
		document.getElementById("ck_women").onclick = doSelWomen;

		function doSelWomen() {
			var stu_man = document.getElementsByClassName('sex')
			for (var i = 0; i < stu_man.length; i++) {
				if (stu_man[i].innerText == '女') {
					var table_id = document.getElementById('table_id');
					var inputAll = table_id.getElementsByTagName('input');
					var checkAllValue = document.getElementById('ck_women').checked;
					inputAll[i].checked = checkAllValue
					document.getElementById('ck_man').checked = false;
				} else if (stu_man[i].innerText != '女') {
					var table_id = document.getElementById('table_id');
					var inputAll = table_id.getElementsByTagName('input');
					inputAll[i].checked = false;
				}
			}
		}
	</script>
</html>
